<template>
  <div class="common">

    <div class="form-box">
      <el-form ref="form" :model="pageParams" label-width="90px">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="司机账号:">
              <el-input v-model="pageParams.account" placeholder="请输入司机账号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机姓名:">
              <el-input v-model="pageParams.name" placeholder="请输入司机姓名" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机手机号:">
              <el-input v-model="pageParams.phone" placeholder="请输入司机手机号" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属机构:">
              <el-select
                v-model="pageParams.agentId"
                placeholder="请选择所属机构"
                style="width:100%"
                clearable
              >
                <el-tree
                  node-key="id"
                  :data="treeData"
                  class="add_tree"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                >
                  <span slot-scope="{data}" class="custom-tree-node">
                    <el-option
                      style="padding: 0"
                      :label="data.name"
                      :value="data.id"
                    /></span></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="searchDriver">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-col>

        </el-row>
      </el-form>
    </div>

    <!-- Table 表格 -->
    <div class="table">
      <!-- 放置table组件 -->
      <el-table :data="list">
        <!-- 放置列 -->
        <el-table-column
          prop=""
          align="center"
          label="序号"
          type="index"
        />
        <el-table-column prop="account" align="center" label="司机账号" />
        <el-table-column prop="name" align="center" label="司机姓名" />
        <el-table-column prop="mobile" align="center" label="司机电话" />
        <el-table-column prop="truck.licensePlate" align="center" label="关联车辆" />
        <el-table-column prop="agency.name" align="center" label="所属机构" />
        <el-table-column prop="workStatus" align="center" label="工作状态">
          <template v-slot="{row}">
            <span>{{ row.truck.status===1?'上班':row.truck.status===0 ? '休息':'无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="操作">

          <template v-slot="{row}">

            <el-button size="mini" type="text" @click="$router.push(`/expreManagement/detail/${row.userId}`)">查看</el-button>
            <el-button size="mini" type="text" @click="allocation(row)">配置车辆</el-button>

          </template>

        </el-table-column>

      </el-table>
    </div>

    <!-- 分页 -->
    <!-- 放置分页组件 -->
    <el-row type="flex" style="height:60px" align="middle" justify="center">
      <!-- 放置分页组件 -->
      <el-pagination
        :current-page="pageParams.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="parseInt(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <el-dialog title="配置车辆" :visible.sync="visible">

      <div class="header">
        <div>
          <span>司机编号：</span>
          <span class="header-text">{{ dialogForm.userId }}</span>
        </div>
        <div>
          <span>司机名称：</span>
          <span class="header-text">{{ dialogForm.name }}</span>
        </div>
        <div>
          <span>司机电话：</span>
          <span class="header-text">{{ dialogForm.mobile }}</span>
        </div>
        <div>
          <span>所属机构：</span>
          <span class="header-text">{{ dialogForm.agency && dialogForm.agency.name }}</span>
        </div>
      </div>

      <div class="serBox">
        <label>配置车辆：</label>
        <el-select
          v-model="selectCar"
          suffix-icon="el-icon-search"
          placeholder="请输入车牌号"
          filterable
          @change="handleChange"
        >
          <el-option
            v-for="item in carList"
            :key="item.id"
            :label="item.licensePlate"
            :value="item.id"
          />
        </el-select>
      </div>

      <el-table :data="tableList" align="center">
        <!-- <div v-show=" (!tableList || tableList.length <= 0)">

          <el-empty description="描述文字">没有啦</el-empty>
        </div> -->
        <el-table-column property="licensePlate" label="车牌号" width="150">
          <template v-slot="{row}">
            {{ row.licensePlate }}
          </template>
        </el-table-column>
        <el-table-column property="status" label="车辆状态" width="200">
          <template v-slot="{row}">
            {{ String(row.status) === '1' ? '可用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column property="" label="操作">

          <template v-slot="{row}">
            <el-link
              type="primary"
              :underline="false"
              @click="carDetail(row)"
            >查看</el-link>
            <!-- @click="$router.push(`/expreManagement/carDetail/${row}`)" -->
            <el-divider direction="vertical" />
            <el-link
              type="danger"
              :underline="false"
              @click="delTableList"
            >删除</el-link>
          </template>

        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>

    </el-dialog>

  </div>
</template>
<script>
import { getDriverListAPI, getTruckDetailsAPI, getUnWorkingTrucksAPI, getOrganizationAPI } from '@/api/staffManagement'
// import { getDriverListAPI } from '@/api/staffManagement'
export default {
  data() {
    return {
      visible: false,
      total: 0,
      list: [],
      // 获取列表   模糊搜索
      pageParams: {
        account: '', // 司机编号 账号
        name: '', // 名字
        phone: '', // 电话
        agentId: '', // 机构ID
        workStatus: '', // 工作状态
        page: 1, // 页码
        pageSize: 10 // 每页条数
      },
      dialogForm: [],
      carList: [], // 配置车辆列表下拉
      tableList: [],
      selectCar: '粤A11223', // // 配置车辆列表选中值
      // 树形控件数据
      defaultProps: {
        label: 'name',
        children: 'children',
        value: '',
        emitPath: false
      },
      treeData: [],
      label: '',
      selectOption: '',
      form: {
        account: '',
        agentId: -1 && '',
        name: '',
        phone: ''
      }

    }
  },
  watch: {
    visible(newVal) {
      if (!newVal) {
        this.tableList = []
      }
    }
  },
  created() {
    this.getDriverList()
    this.getUnWorkingTrucks()
    this.organizationChange()
  },
  methods: {
    // 获取司机管理列表
    async getDriverList() {
      const res = await getDriverListAPI(this.pageParams)
      this.list = res.items
      this.total = res.counts
    },
    // 搜索
    searchDriver() {
      this.pageParams.page = 1
      this.pageParams.pageSize = 10
      this.getDriverList()
    },
    // 重置
    resetForm() {
      this.pageParams = {
        account: '', // 司机编号 账号
        name: '', // 名字
        phone: '', // 电话
        agentId: '', // 机构ID
        workStatus: '', // 工作状态
        page: 1, // 页码
        pageSize: 10
      }
      this.getDriverList()
    },

    allocation(row) {
      this.$confirm('配置车辆需满足以下条件：\n1. 司机信息已完善\n2. 司机已设置排班\n3. 司机绑定车辆未在启用状态',
        '车辆配置', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.visible = true // 控制对话框的显示
        this.dialogForm = row
        this.selectCar = row.truck.licensePlate
        this.handleChange(row.truck.id)
      }).catch(() => {
        // 取消按钮的回调
      })
    },
    // 获取已经停用的车辆
    async getUnWorkingTrucks() {
      const res = await getUnWorkingTrucksAPI()
      this.carList = res
    },
    // 配置车辆下拉
    async  handleChange(id) {
      this.id = id
      // 根据下拉获取的id查详细
      const res = await getTruckDetailsAPI(id)
      this.tableList = [res]
      this.selectCar = res.licensePlate
      console.log(' 获取的id查详细 ----->  ', this.tableList)
    },

    // 弹出层 查看按钮
    carDetail(row) {
      this.$router.push({
        name: '/expreManagement/carDetail',
        params: {
          myObject: row
        }
      })
    },

    // 删除
    delTableList() {
      this.tableList = []
      this.$message.success('删除成功')
      this.selectCar = ''
    },
    // 弹出层提交按钮
    submit() {
      this.$message.error('很抱歉，演示系统，不允许修改')
      setTimeout(() => {
        this.$message.error('接口异常')
      }, 1000)
    },
    // 分页函数
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getDriverList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getDriverList()
    },

    // 获取树状机构信息
    async organizationChange() {
      const res = await getOrganizationAPI()
      this.treeData = JSON.parse(res)
    }

  }

}
</script>
<style scoped lang="scss">

.common{
  background-color: #f4f6f8;
  padding:20px ;
}
.form-box{
  background-color: #ffffff;

  padding:20px 30px;

}
.table{
  margin-top: 20px;

}
.header{
  margin: 20px 40px ;
  .header-text{
    font-size: 14px;
    color: #afaeae;
  }
}

</style>
